<template>
    <a-drawer
            :width="500"
            :title="title"
            :visible="visible"
            @close="onClose">
        <div class="drawer-content-box">
            <div class="info">
                <div>计费规则说明：</div>
                <div>1、电站设备开通之后请及时设定计费规则；防止无法充电；</div>
                <div>2、计费规则自拟，定义好不同规则后，系统根据所处时间段自动选择对应规则进行收费；</div>
            </div>
            <a-form-model :model="rulesUnitEntity" :rules="rules" ref="rulesUnitEntity" layout="vertical">
                <a-form-model-item label="规则时间段" prop="serialNumber">
                    <a-select placeholder="计费规则" v-model:value="rulesUnitEntity.serialNumber">
                        <a-select-option :value="time.id" v-for="time in timeList">{{ time.label }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="计费规则" prop="rulesNumber">
                    <a-select placeholder="计费规则" v-model:value="rulesUnitEntity.rulesNumber" @change="checkMoney">
                        <a-select-option :value="type.id" v-for="type in typeList">{{type.label}}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="所属电站" prop="stationId">
                    <a-select placeholder="所属电站" v-model:value="rulesUnitEntity.stationId" @change="loadPile">
                        <a-select-option :value="station.id" v-for="station in stationEntities">
                            {{ station.stationName }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="所属电桩" prop="pileNumber">
                    <a-select placeholder="所属电桩" v-model:value="rulesUnitEntity.pileNumber" @change="loadRules">
                        <a-select-option :value="pile.pileNumber" v-for="pile in pileEntities">{{ pile.pileName }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="电费价格">
                    <a-input v-model:value="cost" disabled placeholder="请输入电费价格"/>
                </a-form-model-item>
                <a-form-model-item label="服务费">
                    <a-input v-model:value="serviceCost" disabled placeholder="请输入服务费"/>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="drawer-footer-box">
            <a-button type="primary" @click="saveTimeRules('rulesUnitEntity')">保存</a-button>
        </div>
    </a-drawer>
</template>

<script>
    import {api, post} from "@/api/api";
    import moment from "moment";

    export default {
        name: "AddTimeRules",
        props: {
            title: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                id: '',
                visible: false,
                rulesUnitEntity: {},
                cost: '',        // 展示的电费
                serviceCost: '', // 展示的服务费
                rules: {
                    type: [
                        {required: true, message: "请填写规则节点", trigger: "blur",},
                    ],
                    rulesId: [
                        {required: true, message: "请选择具体计费规则", trigger: ["blur", "change"],},
                    ],
                    stationId: [
                        {required: true, message: "请选择所属电站", trigger: ["blur", "change"],},
                    ],
                    pileNumber: [
                        {required: true, message: "请选择所属电桩", trigger: ["blur", "change"],},
                    ],
                    serialNumber: [
                        {required: true, message: "规则时间段不能为空", trigger: ["blur", "change"],},
                    ]
                },
                stationEntities: [],
                pileEntities: [],
                ruleEntity: {},
                typeList: [
                    {id: '00', label: '尖'},
                    {id: '01', label: '峰'},
                    {id: '02', label: '平'},
                    {id: '03', label: '谷'},
                ],
                timeList: [
                    {id: 1, label: "00:00~00:30", startTime: '00:00', endTime: '00:30'},
                    {id: 2, label: "00:30~01:00", startTime: '00:30', endTime: '01:00'},
                    {id: 3, label: "01:00~01:30", startTime: '01:00', endTime: '01:30'},
                    {id: 4, label: "01:30~02:00", startTime: '01:30', endTime: '02:00'},
                    {id: 5, label: "02:00~02:30", startTime: '02:00', endTime: '02:30'},
                    {id: 6, label: "02:30~03:00", startTime: '02:30', endTime: '03:00'},
                    {id: 7, label: "03:00~03:30", startTime: '03:00', endTime: '03:30'},
                    {id: 8, label: "03:30~04:00", startTime: '03:30', endTime: '04:00'},
                    {id: 9, label: "04:00~04:30", startTime: '04:00', endTime: '04:30'},
                    {id: 10, label: "04:30~05:00", startTime: '04:30', endTime: '05:00'},
                    {id: 11, label: "05:00~05:30", startTime: '05:00', endTime: '05:30'},
                    {id: 12, label: "05:30~06:00", startTime: '05:30', endTime: '06:00'},
                    {id: 13, label: "06:00~06:30", startTime: '06:00', endTime: '06:30'},
                    {id: 14, label: "06:30~07:00", startTime: '06:30', endTime: '07:00'},
                    {id: 15, label: "07:00~07:30", startTime: '07:00', endTime: '07:30'},
                    {id: 16, label: "07:30~08:00", startTime: '07:30', endTime: '08:00'},
                    {id: 17, label: "08:00~08:30", startTime: '08:00', endTime: '08:30'},
                    {id: 18, label: "08:30~09:00", startTime: '08:30', endTime: '09:00'},
                    {id: 19, label: "09:00~09:30", startTime: '09:00', endTime: '09:30'},
                    {id: 20, label: "09:30~10:00", startTime: '09:30', endTime: '10:00'},
                    {id: 21, label: "10:00~10:30", startTime: '10:00', endTime: '10:30'},
                    {id: 22, label: "10:30~11:00", startTime: '10:30', endTime: '11:00'},
                    {id: 23, label: "11:00~11:30", startTime: '11:00', endTime: '11:30'},
                    {id: 24, label: "11:30~12:00", startTime: '11:30', endTime: '12:00'},
                    {id: 25, label: "12:00~12:30", startTime: '12:00', endTime: '12:30'},
                    {id: 26, label: "12:30~13:00", startTime: '12:30', endTime: '13:00'},
                    {id: 27, label: "13:00~13:30", startTime: '13:00', endTime: '13:30'},
                    {id: 28, label: "13:30~14:00", startTime: '13:30', endTime: '14:00'},
                    {id: 29, label: "14:00~14:30", startTime: '14:00', endTime: '14:30'},
                    {id: 30, label: "14:30~15:00", startTime: '14:30', endTime: '15:00'},
                    {id: 31, label: "15:00~15:30", startTime: '15:00', endTime: '15:30'},
                    {id: 32, label: "15:30~16:00", startTime: '15:30', endTime: '16:00'},
                    {id: 33, label: "16:00~16:30", startTime: '16:00', endTime: '16:30'},
                    {id: 34, label: "16:30~17:00", startTime: '16:30', endTime: '17:00'},
                    {id: 35, label: "17:00~17:30", startTime: '17:00', endTime: '17:30'},
                    {id: 36, label: "17:30~18:00", startTime: '17:30', endTime: '18:00'},
                    {id: 37, label: "18:00~18:30", startTime: '18:00', endTime: '18:30'},
                    {id: 38, label: "18:30~19:00", startTime: '18:30', endTime: '19:00'},
                    {id: 39, label: "19:00~19:30", startTime: '19:00', endTime: '19:30'},
                    {id: 40, label: "19:30~20:00", startTime: '19:30', endTime: '20:00'},
                    {id: 41, label: "20:00~20:30", startTime: '20:00', endTime: '20:30'},
                    {id: 42, label: "20:30~21:00", startTime: '20:30', endTime: '21:00'},
                    {id: 43, label: "21:00~21:30", startTime: '21:00', endTime: '21:30'},
                    {id: 44, label: "21:30~22:00", startTime: '21:30', endTime: '22:00'},
                    {id: 45, label: "22:00~22:30", startTime: '22:00', endTime: '22:30'},
                    {id: 46, label: "22:30~23:00", startTime: '22:30', endTime: '23:00'},
                    {id: 47, label: "23:00~23:30", startTime: '23:00', endTime: '23:30'},
                    {id: 48, label: "23:30~00:00", startTime: '23:30', endTime: '00:00'},
                ],
                moment,
            }
        },
        methods: {
            show(id) {
                if (id) {
                    this.id = id
                    // 编辑
                    post(api.RulesUnitSingle, {id: id}).then(res => {
                        this.rulesUnitEntity = res.data.data
                    })
                }
                this.visible = true
                post(api.GetStationList, {}).then(res => {
                    this.stationEntities = res.data.data
                })
            },
            //根据选择的分时时段进行判断计费价格
            checkMoney(){
                if (this.ruleEntity) {
                    if (this.rulesUnitEntity.rulesNumber == '00') {
                        // 尖
                        this.cost = this.ruleEntity.tipCost
                        this.serviceCost = this.ruleEntity.tipServiceCost
                    } else if (this.rulesUnitEntity.rulesNumber == '01') {
                        this.cost = this.ruleEntity.peakCost
                        this.serviceCost = this.ruleEntity.peakServiceCost
                    } else if (this.rulesUnitEntity.rulesNumber == '02') {
                        this.cost = this.ruleEntity.flatCost
                        this.serviceCost = this.ruleEntity.flatServiceCost
                    } else if (this.rulesUnitEntity.rulesNumber == '03') {
                        this.cost = this.ruleEntity.valleyCost
                        this.serviceCost = this.ruleEntity.valleyServiceCost
                    }
                } else {
                    this.cost = ''
                    this.serviceCost = ''
                }
            },
            //选择对应充电桩的计费规则
            loadRules(pileNumber) {
                post(api.RulesSingle, {pileNumber: pileNumber}).then(res => {
                    this.ruleEntity = res.data.data
                    this.checkMoney()
                })
            },
            // 加载充电桩
            loadPile(stationId) {
                post(api.GetPileList, {stationId: stationId}).then(res => {
                    this.pileEntities = res.data.data
                })
            },
            saveTimeRules() {
                this.$refs.rulesUnitEntity.validate((valid) => {
                    if (valid) {
                        let that = this
                        this.timeList.forEach(function (item, index) {
                            if (item.id == that.rulesUnitEntity.serialNumber) {
                                that.rulesUnitEntity.startTime = item.startTime
                                that.rulesUnitEntity.endTime = item.endTime
                            }
                        })
                        this.rulesUnitEntity.rulesId = this.ruleEntity.id
                        let requestApi = this.id ? api.UpdateRulesUnit : api.SaveRulesUnit;
                        post(requestApi, this.rulesUnitEntity).then((res) => {
                            if (res.data.code == "000000") {
                                this.$message.success({
                                    content: `${this.id ? "修改" : "添加"}计费规则成功`,
                                });
                                this.onClose()
                                this.$emit('reloadList')
                            } else {
                                this.$message.error({
                                    content: res.data.message,
                                });
                            }
                        }).catch((err) => {
                            console.log(err);
                        });
                    } else {
                        return this.$message.warning({
                            content: "请填写完整信息",
                        });
                    }
                });
            },
            onClose() {
                this.$refs.rulesUnitEntity.resetFields();
                this.id = ''
                this.visible = false
            },
        },
    }
</script>

<style lang="less" scoped>
    @import '../../../static/addRules';
</style>
